<template>
  <div>
    <div class="logindiv">
      <div class="loginform">
        <h3 style="color: #5677ff; text-align: center;margin-bottom:30px">
          ———&nbsp;账号登录&nbsp;———
        </h3>
        <div class="inputstyle">
          <el-input placeholder="请输入账号" v-model="input.input1">
            <template slot="prepend"><i class="el-icon-user-solid"></i></template>
          </el-input>
        </div>
        <div class="inputstyle">
          <el-input show-password placeholder="请输入密码" v-model="input.input2">
            <template slot="prepend"><i class="el-icon-lock"></i></template>
          </el-input>
        </div>
         <div class="inputstyle">
          <el-input placeholder="请输入验证码" v-model="input3">
            <template slot="append"><img src="/images/captcha.jpg" alt=""></template>
          </el-input>
        </div>
        <div class="inputstyle">
         <el-button type="primary" size="default" @click="login" >登录</el-button>
         
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
          input3:'',
            input:{
              input1:'',
              input2:'',
              
            }
        }
    },
    methods: {
      login(){
        this.$router.push({
          name:'index',
          query:this.input
        })
      }
    },
};
</script>

<style>
.logindiv {
  width: 100%;
  height: 700px;
  background: url("/images/login_01.jpg") no-repeat center;
  background-size: cover;
}
.loginform {
  border-radius: 10px;
  width: 300px;
  height: 290px;
  padding: 38px 40px 72px;
  background-color: white;
  position: absolute;
  right: 100px;
  top: 50%;
  margin-top: -145px;
}
.inputstyle{
  margin: 18px;
}
.inputstyle .el-input__inner{
    height: 45px;
}
.inputstyle .el-button{
    width: 100%;
    background-color: #5677FF;
}
</style>